<#include "/inc/layout.ftl"/>

<@layout "welcome">

<script src="${base}/static/dist/js/sockjs.min.js"></script>
<script src="${base}/static/dist/js/stomp.min.js"></script>

<style>
    .starter-template {
        padding: 10px 15px;
        text-align: center;
    }
    .messages {
        line-height: 20px;
        font-size: 14px;
        padding: 10px;
        border: 1px solid #d2d2d2;
        border-radius: 4px;
        overflow-y: scroll;
    }
    .messages p {
        margin: 0;
    }
</style>
<div class="container">
    <div class="starter-template">
        <h1>login: ${logined}</h1>
        <p>
            <#if !logined>
                <a class="btn btn-default" href="login">Login</a>
            </#if>
            <a class="btn btn-default" href="#" id="start">Start</a>
            <a class="btn btn-danger" href="#" id="stop">Stop</a>
        </p>
    </div>
    <div class="messages" id="text">
    </div>
</div><!-- /.container -->

<script>
    var stompClient = null;
    var socket = null;
    function connect() {
        socket = new SockJS('/web-socket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.subscribe('/topic/notice', function (message) {
                showMessage(message.body);
            });
        });
    }
    function showMessage(message) {
        var console = document.getElementById('text');
        var p = document.createElement('p');
        p.style.wordWrap = 'break-word';
        p.appendChild(document.createTextNode(message));
        console.appendChild(p);
        while (console.childNodes.length > 200) {
            console.removeChild(console.firstChild);
        }
        console.scrollTop = console.scrollHeight;
    }

    $(function () {
        connect();

        $('#start').click(function () {
            $.getJSON('start', function (ret) {
                alert(ret.data);
            })
        })

        $('#stop').click(function () {
            $.getJSON('stop', function (ret) {
                alert(ret.message);
            })
        })

        var height = $(window).height();
        $('#text').height(height - 200);
    })
</script>
</@layout>